<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>hexo优化及主题Landscape-F | 净土</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="hexo Landscape-F, hexo 优化，hexo 博客，hexo 主题，hexo 七牛，hexo 多说，hexo theme，hexo github，hexo 图片，hexo 返回顶部, hexo 日历, hexo 友情链接, hexo about me, hexo 分享，hexo 彩色标签云, hexo 文章目录, hexo 最近更新, hexo 评论, hexo 技巧，hexo 教">
<meta property="og:type" content="article">
<meta property="og:title" content="hexo优化及主题Landscape-F">
<meta property="og:url" content="http://howiefh.github.io/2014/04/20/hexo-optimize-and-my-theme-landscape-f/index.html">
<meta property="og:site_name" content="净土">
<meta property="og:description" content="hexo Landscape-F, hexo 优化，hexo 博客，hexo 主题，hexo 七牛，hexo 多说，hexo theme，hexo github，hexo 图片，hexo 返回顶部, hexo 日历, hexo 友情链接, hexo about me, hexo 分享，hexo 彩色标签云, hexo 文章目录, hexo 最近更新, hexo 评论, hexo 技巧，hexo 教">
<meta property="og:updated_time" content="2015-06-21T03:43:17.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="hexo优化及主题Landscape-F">
<meta name="twitter:description" content="hexo Landscape-F, hexo 优化，hexo 博客，hexo 主题，hexo 七牛，hexo 多说，hexo theme，hexo github，hexo 图片，hexo 返回顶部, hexo 日历, hexo 友情链接, hexo about me, hexo 分享，hexo 彩色标签云, hexo 文章目录, hexo 最近更新, hexo 评论, hexo 技巧，hexo 教">
  
    <link rel="alternative" href="/atom.xml" title="净土" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.ico">
  
  <link href="http://fonts.useso.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="/css/style.css" type="text/css">
  
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-40492061-1', 'auto');
ga('send', 'pageview');

</script>


  
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?56d2899c5e919fbf4a7b00de5d1c31dd";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


</head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">净土</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">乐不在外而在心，心以为乐，则是境皆乐；心以为苦，则无境不苦。</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-github-link" class="nav-icon" href="https://github.com/howiefh" title="Github" target="_blank"></a>
        
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed" target="_blank"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" results="0" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://howiefh.github.io"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main"><article id="post-hexo-optimize-and-my-theme-landscape-f" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    
<a href="/2014/04/20/hexo-optimize-and-my-theme-landscape-f/" class="article-date">
  <time datetime="2014-04-20T13:45:47.000Z" itemprop="datePublished">2014-04-20</time>
</a>


    
  <div class="article-category">
    <a class="article-category-link" href="/categories/Hexo/">Hexo</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      hexo优化及主题Landscape-F
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
		
		<div id="toc" class="toc-article">
			<h2 class="toc-title"><span>Contents</span></h2>
		
			<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#安装指南"><span class="toc-number">1.</span> <span class="toc-text">安装指南</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#安装"><span class="toc-number">1.1.</span> <span class="toc-text">安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#启用"><span class="toc-number">1.2.</span> <span class="toc-text">启用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#更新"><span class="toc-number">1.3.</span> <span class="toc-text">更新</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#配置指南"><span class="toc-number">2.</span> <span class="toc-text">配置指南</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#侧边栏"><span class="toc-number">2.1.</span> <span class="toc-text">侧边栏</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#优化总结"><span class="toc-number">3.</span> <span class="toc-text">优化总结</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#返回顶部按钮"><span class="toc-number">3.1.</span> <span class="toc-text">返回顶部按钮</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#在侧边栏和文章中显示文章目录"><span class="toc-number">3.2.</span> <span class="toc-text">在侧边栏和文章中显示文章目录</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#多说评论"><span class="toc-number">3.3.</span> <span class="toc-text">多说评论</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#百度分享"><span class="toc-number">3.4.</span> <span class="toc-text">百度分享</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#友情链接"><span class="toc-number">3.5.</span> <span class="toc-text">友情链接</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#日历"><span class="toc-number">3.6.</span> <span class="toc-text">日历</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#顶部添加github链接"><span class="toc-number">3.7.</span> <span class="toc-text">顶部添加github链接</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#默认分享工具添加微博和人人"><span class="toc-number">3.8.</span> <span class="toc-text">默认分享工具添加微博和人人</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#改变侧栏样式"><span class="toc-number">3.9.</span> <span class="toc-text">改变侧栏样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#调整头部高度和判断banner-url是否为空"><span class="toc-number">3.10.</span> <span class="toc-text">调整头部高度和判断banner-url是否为空</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#调整侧边栏样式"><span class="toc-number">3.11.</span> <span class="toc-text">调整侧边栏样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#修改article_title样式"><span class="toc-number">3.12.</span> <span class="toc-text">修改article title样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#文章底部添加更新时间"><span class="toc-number">3.13.</span> <span class="toc-text">文章底部添加更新时间</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#添加语言文件"><span class="toc-number">3.14.</span> <span class="toc-text">添加语言文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#修改滚动条样式"><span class="toc-number">3.15.</span> <span class="toc-text">修改滚动条样式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#其它"><span class="toc-number">4.</span> <span class="toc-text">其它</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#图床"><span class="toc-number">4.1.</span> <span class="toc-text">图床</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#404页面"><span class="toc-number">4.2.</span> <span class="toc-text">404页面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#hexo文档"><span class="toc-number">4.3.</span> <span class="toc-text">hexo文档</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#修改记录"><span class="toc-number">5.</span> <span class="toc-text">修改记录</span></a></li></ol>
		
		</div>
		
        <p>自从去年装好<a href="https://github.com/tommy351/hexo" target="_blank" rel="external">Hexo</a>后就没有更新过，直到最近才把<a href="https://github.com/tommy351/hexo" target="_blank" rel="external">Hexo</a>从1.1.3更新到了2.5.2。发现有了不少的变化，插件比过去多了，还有了新的默认主题，<a href="http://hexo.io" target="_blank" rel="external">文档</a>也比过去更详细了。但是默认主题有一些我需要的东西还没有，比如文章目录、返回顶部按钮、多说评论，百度分享等等。在网上找了不少<a href="http://github.com/tommy351/hexo/wiki/Themes" target="_blank" rel="external">Hexo主题</a>，最后还是觉得默认主题比较不错，还有一个<a href="https://github.com/A-limon/pacman" target="_blank" rel="external">Pacman</a>感觉也挺好的。于是就在<a href="https://github.com/hexojs/hexo-theme-landscape" target="_blank" rel="external">Landscape</a>基础上主要参考<a href="https://github.com/A-limon/pacman" target="_blank" rel="external">Pacman</a>对默认主题进行了一些优化，这样我的主题<a href="https://github.com/howiefh/hexo-theme-landscape-f" target="_blank" rel="external">Landscape-F</a>就诞生了。</p>
<a id="more"></a>
<h2 id="安装指南">安装指南</h2><h3 id="安装">安装</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git <span class="built_in">clone</span> https://github.com/howiefh/hexo-theme-landscape-f.git themes/landscape<span class="operator">-f</span></span><br></pre></td></tr></table></figure>
<p><a href="https://github.com/howiefh/hexo-theme-landscape-f" target="_blank" rel="external">Landscape-F</a>需要安装Hexo 2.4 或以上版本</p>
<h3 id="启用">启用</h3><p>修改你的博客根目录下的<code>_config.yml</code>配置文件中的<code>theme</code>属性，将其设置为<code>landscape-f</code>。</p>
<h3 id="更新">更新</h3><p>升级前最好先备份原来的<code>_config.yml</code> 文件</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">cd</span> themes/landscape<span class="operator">-f</span></span><br><span class="line">git pull</span><br></pre></td></tr></table></figure>
<h2 id="配置指南">配置指南</h2><p>下面是本主题的配置文件内容，你也可以更改<code>source/css/_variables.styl</code>中的一些配色或图片，对主题进行微调。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"># Header&#10;menu:&#10;  Home: /&#10;  Archives: /archives&#10;rss: /atom.xml&#10;github: https://github.com/howiefh&#10;&#10;# Content&#10;excerpt_link: Read More&#10;fancybox: true&#10;&#10;# Sidebar&#10;sidebar: right&#10;widgets:&#10;- about_me&#10;- category&#10;- tag&#10;- tagcloud&#10;- archive&#10;- calendar&#10;- recent_posts&#10;- duoshuo_recent_comments&#10;- links&#10;&#10;# Miscellaneous&#10;google_analytics:&#10;baidu_tongji:&#10;favicon: /favicon.ico&#10;twitter:&#10;google_plus:&#10;fb_admins:&#10;fb_app_id:&#10;&#10;# Toc&#10;toc:&#10;  article: true   ## show contents in article.&#10;  aside: true     ## show contents in aside.&#10;&#10;# Scroll to top&#10;go_top: true&#10;&#10;# duoshuo&#10;duoshuo_shortname: &#10;&#10;# baidu share&#10;baidushare: true&#10;&#10;# blogroll&#10;links:&#10;- name: 404 page&#10;  link: http://yibo.iyiyun.com/js/yibo404/key/1&#10;&#10;# about me&#10;about_me:&#10;  title: ABOUT ME&#10;  gravatar: a@abc.com&#10;  avatar: /images/github.jpg&#10;  texts:&#10;  - Hi,I&#39;m howiefh.&#10;&#10;# display updated&#10;display_updated: true</span><br></pre></td></tr></table></figure>
<ul>
<li><strong>menu</strong> - 导航菜单</li>
<li><strong>rss</strong> - rss 链接</li>
<li><strong>github</strong> - github 链接</li>
<li><strong>excerpt_link</strong> - “Read More” 链接. 设置为<code>false</code>可以隐藏</li>
<li><strong>fancybox</strong> - 启用 <a href="http://fancyapps.com/fancybox/" target="_blank" rel="external">Fancybox</a></li>
<li><strong>sidebar</strong> - 侧边栏样式. 可以选择 <code>left</code>, <code>right</code>, <code>bottom</code> or <code>false</code> 进行设置.</li>
<li><strong>widgets</strong> - 侧边栏显示的小工具</li>
<li><strong>google_analytics</strong> - Google Analytics ID</li>
<li><strong>baidu_tongji</strong> - 百度统计ID</li>
<li><strong>favicon</strong> - Favicon 路径 </li>
<li><strong>twitter</strong> - Twiiter ID</li>
<li><strong>google_plus</strong> - Google+ ID</li>
<li><strong>toc</strong> - 在文章和侧边栏显示文章目录（侧边栏的文章目录默认隐藏，按返回顶部下面的按钮可以显示）</li>
<li><strong>go_top</strong> - 返回顶部</li>
<li><strong>duoshuo_shortname</strong> - 多说short name</li>
<li><strong>baidushare</strong> - 在文章中激活百度分享，如果设置为<code>false</code>将在文章中显示默认分享工具,首页仍旧使用默认分享工具。</li>
<li><strong>links</strong> - 在侧边栏显示友情链接，name链接名称，link链接地址</li>
<li><strong>about_me</strong> - 在侧边栏显示关于我。优先使用gravatar，如果没有填写gravatar，将使用设置的avatar图片。texts 可以是一些介绍的文字。</li>
<li><strong>display_updated</strong> - 在文章底部显示文章更新时间</li>
</ul>
<h3 id="侧边栏">侧边栏</h3><p><a href="https://github.com/howiefh/hexo-theme-landscape-f" target="_blank" rel="external">Landscape-F</a>提供了9种小工具。</p>
<ul>
<li>category</li>
<li>tag</li>
<li>tagcloud</li>
<li>archive</li>
<li>recent_posts</li>
<li>about_me</li>
<li>calendar</li>
<li>duoshuo_recent_comments</li>
<li>links</li>
</ul>
<p>相比默认主题增加了About Me、日历、多说最近评论、友情链接，并且对tags、tagcloud、categories、archive 的样式做了调整，比如数字的显示。</p>
<h2 id="优化总结">优化总结</h2><h3 id="返回顶部按钮">返回顶部按钮</h3><p>在文章的页面右下方会显示返回顶部的按钮。</p>
<h3 id="在侧边栏和文章中显示文章目录">在侧边栏和文章中显示文章目录</h3><p>默认会在侧边栏和文章中显示文章目录，侧边栏文章目录默认隐藏，可以通过文章目录按钮来进行开关侧边栏的文章目录。</p>
<h3 id="多说评论">多说评论</h3><p>使用了多说评论系统，在侧边栏会显示最近的评论，在主页面文章的右下方显示评论数。</p>
<h3 id="百度分享">百度分享</h3><p>使用了百度分享，默认启用，如果禁用，文章中使用默认的分享工具。</p>
<h3 id="友情链接">友情链接</h3><p>侧边栏添加友情链接</p>
<h3 id="日历">日历</h3><p>侧边栏添加日历，如果当月某天发布过博客，对应日期将会显示为链接，仅限当月。需要使用<a href="https://github.com/howiefh/hexo-calendar" target="_blank" rel="external">hexo-calendar</a></p>
<h3 id="顶部添加github链接">顶部添加github链接</h3><p>顶部github 链接可以在<code>_config</code>中设置</p>
<h3 id="默认分享工具添加微博和人人">默认分享工具添加微博和人人</h3><h3 id="改变侧栏样式">改变侧栏样式</h3><h3 id="调整头部高度和判断banner-url是否为空">调整头部高度和判断banner-url是否为空</h3><p>可以在<code>source/css/_variables</code>设置banner和背景图片。</p>
<h3 id="调整侧边栏样式">调整侧边栏样式</h3><p>在archive页面仅显示archive小工具 </p>
<h3 id="修改article_title样式">修改article title样式</h3><h3 id="文章底部添加更新时间">文章底部添加更新时间</h3><h3 id="添加语言文件">添加语言文件</h3><h3 id="修改滚动条样式">修改滚动条样式</h3><h2 id="其它">其它</h2><h3 id="图床">图床</h3><p>如果图片很多的话，把图片都放在github感觉不大明智，使用图床就很有必要了，推荐使用<a href="https://portal.qiniu.com/signup?code=3llacy35or5ua" target="_blank" rel="external">七牛</a>做图床，访问速度极快，支持日志、防盗链和水印。不光是图片，你甚至可以将生成的静态文件放在<a href="https://portal.qiniu.com/signup?code=3llacy35or5ua" target="_blank" rel="external">七牛</a>上。<br>标准用户有每月10GB流量+总空间10GB+PUT/DELETE 10万次请求+GET 100万次请求，应该足够了。</p>
<h3 id="404页面">404页面</h3><p>我使用的是益云404公益页面<a href="http://yibo.iyiyun.com/Index/web404" target="_blank" rel="external">http://yibo.iyiyun.com/Index/web404</a>。把404.html放在<code>landscape-f/source</code>下就可以了。</p>
<h3 id="hexo文档">hexo文档</h3><p>在stylus文件中可以使用 hexo-config(‘title’) 获得配置文件的配置<br><a href="http://hexo.io/docs/tag-plugins.html" target="_blank" rel="external">tag plugins</a><br><a href="http://hexo.io/docs/variables.html" target="_blank" rel="external">variables</a><br><a href="http://hexo.io/api/warehouse/classes/Model.html" target="_blank" rel="external">Model</a><br>常用方法<br><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">site<span class="class">.posts</span><span class="class">.each</span>()</span><br><span class="line">site<span class="class">.posts</span><span class="class">.sort</span>()</span><br><span class="line">site<span class="class">.posts</span><span class="class">.toArray</span>()</span><br></pre></td></tr></table></figure></p>
<p>可以在<code>layout/_widget/tagcloud.ejs</code>中使用<code>&lt;%- tagcloud({start_color: &#39;#7dc3de&#39;, end_color: &#39;#800080&#39;,color: true}) %&gt;</code>替换原有对应内容,实现彩色的标签云。</p>
<h2 id="修改记录">修改记录</h2><ul>
<li>返回顶部按钮</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">modified:   layout/_partial/after-<span class="tag">footer</span><span class="class">.ejs</span></span><br><span class="line">modified:   source/css/_variables<span class="class">.styl</span></span><br><span class="line">modified:   source/css/style<span class="class">.styl</span></span><br><span class="line">add layout/_partial/bottomBtn<span class="class">.ejs</span></span><br><span class="line">add source/css/_partial/bottombtn<span class="class">.styl</span></span><br><span class="line">add source/js/gotop.js</span><br></pre></td></tr></table></figure>
<ul>
<li>文章目录</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">modified:   layout/_partial/after-<span class="tag">footer</span><span class="class">.ejs</span></span><br><span class="line">modified:   layout/_partial/sidebar<span class="class">.ejs</span></span><br><span class="line">modified:   layout/_partial/<span class="tag">article</span><span class="class">.ejs</span></span><br><span class="line">modified:   source/css/_variables<span class="class">.styl</span></span><br><span class="line">modified:   source/css/style<span class="class">.styl</span></span><br><span class="line">add layout/_partial/<span class="attribute">bottom</span>-btn<span class="class">.ejs</span></span><br><span class="line">add source/css/_partial/<span class="attribute">bottom</span>-btn<span class="class">.styl</span></span><br><span class="line">add	source/css/_partial/toc<span class="class">.styl</span></span><br><span class="line">add	source/js/toc_aside_toggle.js</span><br></pre></td></tr></table></figure>
<ul>
<li>多说</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">modified:   layout/_partial/after-<span class="tag">footer</span><span class="class">.ejs</span></span><br><span class="line">modified:   layout/_partial/<span class="tag">article</span><span class="class">.ejs</span></span><br><span class="line">layout/_partial/<span class="tag">article</span>.ejs中的<span class="tag">div</span> 一定要有class=<span class="string">"ds-thread"</span> 注意中间的不是下划线,直接在disqus上改的,改完不显示评论纠结半天</span><br><span class="line">多加了显示评论数的代码&lt;<span class="tag">a</span> href=<span class="string">"&lt;%- post.permalink %&gt;#ds_thread"</span> class=<span class="string">"ds-thread-count article-comment-link"</span> data-thread-key=<span class="string">"&lt;%- config.root %&gt;&lt;%- post.path%&gt;"</span>&gt;暂无评论&lt;/a&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>百度分享</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">modified:   layout/_partial/<span class="tag">article</span><span class="class">.ejs</span></span><br><span class="line">modified:   layout/_partial/after-<span class="tag">footer</span>.ejs</span><br></pre></td></tr></table></figure>
<ul>
<li>最近评论</li>
</ul>
<figure class="highlight dockerfile"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">add</span> <span class="bash">layout/_widget/duoshuo_recent_comments.ejs</span></span><br></pre></td></tr></table></figure>
<ul>
<li>友情链接</li>
</ul>
<figure class="highlight dockerfile"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">add</span> <span class="bash">layout/_widget/links.ejs</span></span><br></pre></td></tr></table></figure>
<ul>
<li>about me</li>
</ul>
<figure class="highlight dockerfile"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">add</span> <span class="bash">layout/_widget/about_me.ejs</span><br><span class="line"></span><span class="built_in">add</span> <span class="bash"><span class="built_in">source</span>/css/_partial/about-me.styl</span></span><br></pre></td></tr></table></figure>
<ul>
<li>日历</li>
</ul>
<p>参考<a href="http://www.cnblogs.com/focuslgy/p/3260975.html" target="_blank" rel="external">http://www.cnblogs.com/focuslgy/p/3260975.html</a></p>
<figure class="highlight dockerfile"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">add</span> <span class="bash">layout/_widget/calendar.ejs</span><br><span class="line"></span><span class="built_in">add</span> <span class="bash"><span class="built_in">source</span>/css/_partial/calendar.styl</span><br><span class="line"></span><span class="built_in">add</span> <span class="bash">helper plugin hexo-calendar</span></span><br></pre></td></tr></table></figure>
<ul>
<li>github 链接</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">modified:layout/_partial/<span class="tag">header</span><span class="class">.ejs</span></span><br><span class="line">modified:source/css/_partial/<span class="tag">header</span>.styl</span><br></pre></td></tr></table></figure>
<ul>
<li>默认分享添加 微博和人人</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">modified:layout/_partial/<span class="tag">article</span><span class="class">.ejs</span></span><br><span class="line">modified:source/css/_partial/<span class="tag">article</span><span class="class">.styl</span></span><br><span class="line">modified:source/css/_variables<span class="class">.styl</span></span><br><span class="line">modified:source/js/script.js</span><br></pre></td></tr></table></figure>
<ul>
<li>改变侧栏样式</li>
</ul>
<figure class="highlight groovy"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">modified:</span>source<span class="regexp">/css/</span>_partial/sidebar.styl</span><br><span class="line"><span class="string">modified:</span> helper plugin list.js</span><br></pre></td></tr></table></figure>
<ul>
<li>调整头部高度和判断banner-url是否为空</li>
</ul>
<figure class="highlight groovy"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">modified:</span>source<span class="regexp">/css/</span>_partial/header.styl</span><br><span class="line"><span class="string">modified:</span>source<span class="regexp">/css/</span>_variables.styl</span><br></pre></td></tr></table></figure>
<ul>
<li>修改sidebar</li>
</ul>
<p>当页面是archives时只显示sidebar只显示archives</p>
<figure class="highlight groovy"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">modified:</span>layout<span class="regexp">/_partial/</span>sidebar.ejs</span><br></pre></td></tr></table></figure>
<ul>
<li>修改article title 样式,显示左侧边框</li>
</ul>
<figure class="highlight groovy"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">modified:</span>layout<span class="regexp">/_partial/</span>article.ejs</span><br></pre></td></tr></table></figure>
<ul>
<li>修改滚动条样式</li>
</ul>
<figure class="highlight gradle"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">added:<span class="keyword">source</span><span class="regexp">/css/</span>_partial<span class="regexp">/scrollbar.styl</span></span><br></pre></td></tr></table></figure>
<ul>
<li>文章底部添加更新时间</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">modified:layout/_partial/<span class="tag">article</span><span class="class">.ejs</span></span><br><span class="line">modified:layout/_partial/post/date<span class="class">.ejs</span></span><br><span class="line">modified:source/css/_partial/<span class="tag">article</span>.styl</span><br></pre></td></tr></table></figure>
<ul>
<li>语言文件</li>
</ul>
<figure class="highlight dockerfile"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">add</span> <span class="bash">languages/</span></span><br></pre></td></tr></table></figure>

      
    </div>
    <footer class="article-footer">
	  
	  <!-- 百度分享 Start -->
	  <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
	  <!-- 百度分享 End -->
	  
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Hexo/">Hexo</a></li></ul>

	  
<span>
Updated:<time datetime="2015-06-21T03:43:17.000Z" itemprop="dateModified">2015-06-21</time>
</span>


    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2014/04/26/mongodb-note-1-install-mongodb/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          mongodb笔记(一) 安装启动mongodb
        
      </div>
    </a>
  
  
    <a href="/2014/03/04/android-note-3---android-layout-manager/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">Android布局管理器</div>
    </a>
  
</nav>

  
</article>



<!-- 多说评论框 start -->

<section id="comments">
  <div class="ds-thread"  data-thread-key="/2014/04/20/hexo-optimize-and-my-theme-landscape-f/" data-title="hexo优化及主题Landscape-F" data-url="http://howiefh.github.io/2014/04/20/hexo-optimize-and-my-theme-landscape-f/" id="ds_thread">
    <noscript>Please enable JavaScript to view the <a href="//duoshuo.com/?ref_noscript">comments powered by duoshuo.</a></noscript>
  </div>
</section>

<!-- 多说评论框 end -->
</section>
        
          
  <div id="toc" class="toc-aside">
  <h2 class="toc-title">Contents</h2>
    
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#安装指南"><span class="toc-number">1.</span> <span class="toc-text">安装指南</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#安装"><span class="toc-number">1.1.</span> <span class="toc-text">安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#启用"><span class="toc-number">1.2.</span> <span class="toc-text">启用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#更新"><span class="toc-number">1.3.</span> <span class="toc-text">更新</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#配置指南"><span class="toc-number">2.</span> <span class="toc-text">配置指南</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#侧边栏"><span class="toc-number">2.1.</span> <span class="toc-text">侧边栏</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#优化总结"><span class="toc-number">3.</span> <span class="toc-text">优化总结</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#返回顶部按钮"><span class="toc-number">3.1.</span> <span class="toc-text">返回顶部按钮</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#在侧边栏和文章中显示文章目录"><span class="toc-number">3.2.</span> <span class="toc-text">在侧边栏和文章中显示文章目录</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#多说评论"><span class="toc-number">3.3.</span> <span class="toc-text">多说评论</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#百度分享"><span class="toc-number">3.4.</span> <span class="toc-text">百度分享</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#友情链接"><span class="toc-number">3.5.</span> <span class="toc-text">友情链接</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#日历"><span class="toc-number">3.6.</span> <span class="toc-text">日历</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#顶部添加github链接"><span class="toc-number">3.7.</span> <span class="toc-text">顶部添加github链接</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#默认分享工具添加微博和人人"><span class="toc-number">3.8.</span> <span class="toc-text">默认分享工具添加微博和人人</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#改变侧栏样式"><span class="toc-number">3.9.</span> <span class="toc-text">改变侧栏样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#调整头部高度和判断banner-url是否为空"><span class="toc-number">3.10.</span> <span class="toc-text">调整头部高度和判断banner-url是否为空</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#调整侧边栏样式"><span class="toc-number">3.11.</span> <span class="toc-text">调整侧边栏样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#修改article_title样式"><span class="toc-number">3.12.</span> <span class="toc-text">修改article title样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#文章底部添加更新时间"><span class="toc-number">3.13.</span> <span class="toc-text">文章底部添加更新时间</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#添加语言文件"><span class="toc-number">3.14.</span> <span class="toc-text">添加语言文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#修改滚动条样式"><span class="toc-number">3.15.</span> <span class="toc-text">修改滚动条样式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#其它"><span class="toc-number">4.</span> <span class="toc-text">其它</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#图床"><span class="toc-number">4.1.</span> <span class="toc-text">图床</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#404页面"><span class="toc-number">4.2.</span> <span class="toc-text">404页面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#hexo文档"><span class="toc-number">4.3.</span> <span class="toc-text">hexo文档</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#修改记录"><span class="toc-number">5.</span> <span class="toc-text">修改记录</span></a></li></ol>
    
  </div>

<aside id="sidebar">

  
    
<div class="widget-wrap">
  <h3 class="widget-title">ABOUT ME</h3>
  <ul class="widget about-me">
    
    <li><img class="author" title="About me" src="http://fh-1.qiniudn.com/okal-eltocat.jpg" /></li>
    
    
    <li>Hi,I'm FengHao.</li>
    
    <li>I'll share something interesting and my learning experience with you at this blog.</li>
    
    <li>前博客:<a href="http://hi.baidu.com/idea_star" target="_BLANK">百度空间</a></li>
    
  </ul>
</div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Android/">Android</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/C/">C</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Database/">Database</a><span class="category-list-count">13</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Database/MongoDB/">MongoDB</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Database/MySQL/">MySQL</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Eclipse/">Eclipse</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/FTP/">FTP</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Git/">Git</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Hexo/">Hexo</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Java/">Java</a><span class="category-list-count">20</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Java/FreeMarker/">FreeMarker</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Java/Shiro/">Shiro</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaEE/">JavaEE</a><span class="category-list-count">4</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/JavaEE/Hibernate/">Hibernate</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaEE/JSP/">JSP</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaEE/Spring/">Spring</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">5</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/jQuery/">jQuery</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/">Linux</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/PHP/">PHP</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Suse/">Suse</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Ubuntu/">Ubuntu</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vim/">Vim</a><span class="category-list-count">8</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/编程/">编程</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/软件/">软件</a><span class="category-list-count">1</span></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Android/" style="font-size: 14.75px; color: #65bfa7">Android</a> <a href="/tags/C/" style="font-size: 13.88px; color: #71c1c2">C</a> <a href="/tags/CAS/" style="font-size: 13px; color: #7dc3de">CAS</a> <a href="/tags/Chrome/" style="font-size: 13px; color: #7dc3de">Chrome</a> <a href="/tags/Clean-Code/" style="font-size: 13.88px; color: #71c1c2">Clean Code</a> <a href="/tags/Database/" style="font-size: 13px; color: #7dc3de">Database</a> <a href="/tags/Eclipse/" style="font-size: 13px; color: #7dc3de">Eclipse</a> <a href="/tags/FTP/" style="font-size: 13.88px; color: #71c1c2">FTP</a> <a href="/tags/FreeMarker/" style="font-size: 14.75px; color: #65bfa7">FreeMarker</a> <a href="/tags/Gcc/" style="font-size: 13px; color: #7dc3de">Gcc</a> <a href="/tags/Git/" style="font-size: 14.75px; color: #65bfa7">Git</a> <a href="/tags/Github-Pages/" style="font-size: 13px; color: #7dc3de">Github Pages</a> <a href="/tags/Hexo/" style="font-size: 14.75px; color: #65bfa7">Hexo</a> <a href="/tags/Hibernate/" style="font-size: 13px; color: #7dc3de">Hibernate</a> <a href="/tags/JSP/" style="font-size: 13px; color: #7dc3de">JSP</a> <a href="/tags/JVM/" style="font-size: 14.75px; color: #65bfa7">JVM</a> <a href="/tags/Java/" style="font-size: 14.75px; color: #65bfa7">Java</a> <a href="/tags/JavaMail/" style="font-size: 13px; color: #7dc3de">JavaMail</a> <a href="/tags/JavaScript/" style="font-size: 16.5px; color: #4dbc6f">JavaScript</a> <a href="/tags/Linux/" style="font-size: 13.88px; color: #71c1c2">Linux</a> <a href="/tags/Log/" style="font-size: 13px; color: #7dc3de">Log</a> <a href="/tags/Markdown/" style="font-size: 13.88px; color: #71c1c2">Markdown</a> <a href="/tags/MongoDB/" style="font-size: 20px; color: #1db400">MongoDB</a> <a href="/tags/MySQL/" style="font-size: 13.88px; color: #71c1c2">MySQL</a> <a href="/tags/PHP/" style="font-size: 16.5px; color: #4dbc6f">PHP</a> <a href="/tags/Rhythmbox/" style="font-size: 13px; color: #7dc3de">Rhythmbox</a> <a href="/tags/SSO/" style="font-size: 13px; color: #7dc3de">SSO</a> <a href="/tags/Servlet/" style="font-size: 13px; color: #7dc3de">Servlet</a> <a href="/tags/Shiro/" style="font-size: 13.88px; color: #71c1c2">Shiro</a> <a href="/tags/Spring/" style="font-size: 13.88px; color: #71c1c2">Spring</a> <a href="/tags/Suse/" style="font-size: 13px; color: #7dc3de">Suse</a> <a href="/tags/Thinking-in-Java/" style="font-size: 19.13px; color: #29b61c">Thinking in Java</a> <a href="/tags/Ubuntu/" style="font-size: 17.38px; color: #41ba53">Ubuntu</a> <a href="/tags/Vim/" style="font-size: 18.25px; color: #35b838">Vim</a> <a href="/tags/VirtualBox/" style="font-size: 13px; color: #7dc3de">VirtualBox</a> <a href="/tags/Vsftpd/" style="font-size: 13px; color: #7dc3de">Vsftpd</a> <a href="/tags/jQuery/" style="font-size: 13px; color: #7dc3de">jQuery</a> <a href="/tags/pam-mysql/" style="font-size: 13px; color: #7dc3de">pam_mysql</a> <a href="/tags/小米/" style="font-size: 13px; color: #7dc3de">小米</a> <a href="/tags/软件/" style="font-size: 15.63px; color: #59bd8b">软件</a>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/09/">September 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/08/">August 2015</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/07/">July 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/05/">May 2015</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/04/">April 2015</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/03/">March 2015</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/02/">February 2015</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/12/">December 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/11/">November 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/10/">October 2014</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/09/">September 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/08/">August 2014</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/07/">July 2014</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/06/">June 2014</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/05/">May 2014</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/04/">April 2014</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/03/">March 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/02/">February 2014</a><span class="archive-list-count">11</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/01/">January 2014</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/12/">December 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/11/">November 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/08/">August 2013</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/07/">July 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/06/">June 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/05/">May 2013</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/04/">April 2013</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/03/">March 2012</a><span class="archive-list-count">1</span></li></ul>
    </div>
  </div>


  
    <div class="widget-wrap">
  <h3 class="widget-title">Calendar</h3>
  <div class="widget">
    <div id="g-calendar" class="g-calendar">
        <span class="g-calendar-prev"></span>
		 
        <span class="g-calendar-back"></span>
        <span class="g-calendar-now"></span>
		 
        <span class="g-calendar-next"></span>
        <div class="g-calendar-hd"></div>
        <div class="g-calendar-tit"></div>
        <div class="g-calendar-bd"></div>
    </div>
  </div>
</div>
<script type="text/javascript">
function LGY_calendar(wrapId, options){
    this.oWrap = this.getId(wrapId);
    this.oHead = this.getByClassName('g-calendar-hd',this.oWrap)[0];
    this.oBody = this.getByClassName('g-calendar-bd',this.oWrap)[0];
    this.oTit = this.getByClassName('g-calendar-tit',this.oWrap)[0];
    this.oPrev = this.getByClassName('g-calendar-prev',this.oWrap)[0];
    this.oNext = this.getByClassName('g-calendar-next',this.oWrap)[0];
    this.oNow = this.getByClassName('g-calendar-now',this.oWrap)[0];
    this.oBack = this.getByClassName('g-calendar-back',this.oWrap)[0];
    this.init();
}
LGY_calendar.prototype = {
    ///////////获取ID元素
    getId:function(id){
        return document.getElementById(id);
    },
    ////////获取css类名元素
    getByClassName:function(className,parent){
        var elem = [],
            node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
            p = new RegExp("(^|\\s)"+className+"(\\s|$)");
        for(var n=0,i=node.length;n<i;n++){
            if(p.test(node[n].className)){
                elem.push(node[n]);
            }
        }
        return elem;
    },
    //填充日历
    fillDate:function(year,month){
        //本月份第一天是星期几-为显示上个月的天数做铺垫
        var first_day = new Date(year,month,1).getDay(),
        //如果刚好是星期天，则空出一行（显示上个月的天数）
            first_day = first_day == 0?first_day=7:first_day;
        //本月份最后一天是几号
        var final_date = new Date(year,month+1,0).getDate(),
        //上个月的最后一天是几号
            last_date = new Date(year,month,0).getDate(),
        //剩余的格子数--即排在末尾的格子数
            surplus = 42 - first_day - final_date;
        //设置年的链接
        var yearHead = "<a href='/" + "archives/" + year + "/'>" + year + " "+ "</a>"; 
        //设置年的链接
        var monthHead = "";
        var month1 = month + 1;
        if (month1 < 10) {
            monthHead = "<a href='/" + "archives/" + year + "/" + "0" + month1 + "/'>" + " " + month1 + " " + "</a>";
        } else {
            monthHead = "<a href='/" + "archives/" + year + "/" + month1 + "/'>" + " " + month1 + " " + "</a>";
        }
        //设置表头的日历
        this.oHead.innerHTML = yearHead+'年'+monthHead+'月';
        //填充日历执行
        var html = '';
        //上个月的显示天数
        for(var i=0;i<first_day;i++){
            html+='<span class="g-calendar-grey">'+(last_date-(first_day-1)+i)+'</span>';
        }
        //本月的显示天数
        var postdate = new Date("Sun Apr 20 2014 21:45:47 GMT+0800"); 
        if (true && postdate.getFullYear() == year && postdate.getMonth() == month) { 
            html += '<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span><a href="/2014/04/20/hexo-optimize-and-my-theme-landscape-f/" title="hexo优化及主题Landscape-F">20</a></span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span><a href="/2014/04/26/mongodb-note-1-install-mongodb/" title="mongodb笔记(一) 安装启动mongodb">26</a></span><span>27</span><span>28</span><span><a href="/2014/04/29/vim-table-mode/" title="vim插入表格(Vim Table Mode)">29</a></span><span><a href="/2014/04/30/mongodb-note-2-start-mongodb/" title="mongodb笔记(二) 入门">30</a></span><span>31</span>';
        } else {
            for(var j=0;j<final_date;j++){        
                html+='<span id="d'+(j+1)+'">'+(j+1)+'</span>';
            }
        }
        //下个月的显示天数
        for(var k=0;k<surplus;k++){
            html+='<span class="g-calendar-grey">'+(k+1)+'</span>';
        }
        //fill
        this.oBody.innerHTML = html;
        // 当前状态
        if(year==this.c_year&&this.c_month==month){
            this.oBody.getElementsByTagName('span')[first_day+this.date-1].className='g-calendar-on';
        }

        // 对所有文章遍历,然后将有文章的日期加上链接,如果文章太多的话,生成页面会很大,去掉了
        
    },
    // next切换
    next:function(){
        var _that = this;
        this.oNext.onclick = function(){
            _that.month++;
            if(_that.month>11){
                _that.month = 0;
                _that.year++;
            }
            // 填充日历
            _that.fillDate(_that.year,_that.month);
        };
    },
    // back 切换
    back:function(){
        var _that = this;
        if(this.oBack != undefined) {
            this.oBack.onclick = function(){
                var postdate = new Date("Sun Apr 20 2014 21:45:47 GMT+0800"); 
                _that.year = postdate.getFullYear();
                _that.month = postdate.getMonth();
                // 填充日历
                _that.fillDate(_that.year,_that.month);
            };
        }
    },
    // now切换
    now:function(){
        var _that = this;
        if(this.oNow != undefined ) {
            this.oNow.onclick = function(){
                var nowDate = new Date(); 
                _that.year = nowDate.getFullYear();
                _that.month = nowDate.getMonth();
                // 填充日历
                _that.fillDate(_that.year,_that.month);
            };
        }
    },
    // prev切换
    prev:function(){
        var _that = this;
        this.oPrev.onclick = function(){
            _that.month--;
            if(_that.month<0){
                _that.month = 11;
                _that.year--;
            }
            // 填充日历
            _that.fillDate(_that.year,_that.month);
        };
    },
    init:function(){
        this.oTit.innerHTML = '<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>';
        // 获取今天的日历时间
        var now = new Date();
        this.c_year = this.year = now.getFullYear();
        this.c_month = this.month = now.getMonth();
        this.date = now.getDate();
        // 初始化--填充日历
        this.fillDate(this.year,this.month);
        //next切换
        this.next();
        //prev切换
        this.prev();
        //back 切换
        this.back();
        //now 切换
        this.now();
    }
}
new LGY_calendar('g-calendar');
</script>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2015/09/01/javascript-summary/">JavaScript 总结</a>
          </li>
        
          <li>
            <a href="/2015/08/28/javascript-oop-function-expression-and-async/">JavaScript 面向对象程序设计、函数表达式和异步编程</a>
          </li>
        
          <li>
            <a href="/2015/08/28/javascript-reference-type/">JavaScript 引用类型</a>
          </li>
        
          <li>
            <a href="/2015/08/28/javascript-grammar/">JavaScript 基本语法</a>
          </li>
        
          <li>
            <a href="/2015/08/10/java-web/">Java Web 笔记</a>
          </li>
        
      </ul>
    </div>
  </div>


  
    
<div class="widget-wrap">
  <h3 class="widget-title">Recent Comments</h3>
  <ul class="widget ds-recent-comments" data-num-items="5" data-show-avatars="0" data-show-title="1" data-show-time="1"></ul>
</div>
<!-- 需要多说的公用代码 -->


  

</aside>

        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2015 howiefh<br>
      Powered by <a href="http://zespia.tw/hexo/" target="_blank">Hexo</a> and Theme by <a href="https://github.com/howiefh/hexo-theme-landscape-f" target="_blank" title="Landscape-F">Landscape-F</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<!-- 多说公共JS代码 start (一个网页只需插入一次) -->

<script type="text/javascript">
  var duoshuoQuery = {short_name:"howiefh"};
  (function() {
	var ds = document.createElement('script');
	ds.type = 'text/javascript';ds.async = true;
	ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
	ds.charset = 'UTF-8';
	(document.getElementsByTagName('head')[0] 
		|| document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
</script> 

<!-- 多说公共JS代码 end -->

<!-- 百度分享 start -->

<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":["mshare","douban","bdysc","sqq","qq","hi","baidu","huaban","youdao","sdo","mail","xg","diandian","fx","copy","print"],"bdPic":"","bdStyle":"1","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

<!-- 百度分享 end -->

<!--
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="/js/jquery.min.js"></script>
-->
<script src="/js/jquery.min.js" type="text/javascript"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css">
  <script src="/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>


<div class="bottom-btn">

	<a class="icon-gotop" href="javascript:void(0)" title="返回顶部"></a>
	<script src="/js/gotop.js" type="text/javascript"></script>
	<!--
	<script src="/js/gotop.js"></script>
	-->


	<a class="icon-toc-toggle" href="javascript:void(0)" title="文章目录"></a>
	<!--
	<script src="/js/toc_aside_toggle.js"></script>
	-->

</div>
<script src="/js/toc_aside_toggle.js" type="text/javascript"></script>


<script src="/js/script.js" type="text/javascript"></script>

  </div>
</body>
</html>
